<style>
    #btn-wrap{margin:100px auto;text-align:center;}
    form{
        margin:30px;
    }


    /*定位*/
    .map-location{
        width: 28px;
        height: 30px;
        position: absolute;
        top: 8px;
        right: 0px;
        z-index: 5;
        font-size: 18px;
        cursor: pointer;
    }
    .map-location-input{
        padding-right: 30px;
    }
</style>
<link rel="stylesheet" href="https://layui.11dz.cn/layui-v2.6.8/layui/css/layui.css">

<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label">用户id</label>
            <div class="layui-input-block">
                <input type="text" name="u_Id" class="layui-input"  placeholder="请输入用户id" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关联的门店id</label>
            <div class="layui-input-block">
                <input type="text" name="store_id" class="layui-input"  placeholder="请输入关联的门店id" value="">
            </div>
        </div>


        <div class="layui-form-item" id="bioarea-wrap">
            <label class="layui-form-label add-width required">所属地域</label>
            <label class="layui-form-label small-width">省</label>
            <div class="layui-input-inline">
                <select style="width: 100px;" class="level-1-select" lay-filter="#bioarea-wrap1level"
                        name="province">
                    <option value="">请选择省</option>
                </select>
            </div>
            <label class="layui-form-label small-width">市</label>
            <div class="layui-input-inline">
                <select class="level-2-select" lay-filter="#bioarea-wrap2level" name="city">
                    <option value="">请选择市</option>
                </select>
            </div>
            <label class="layui-form-label small-width">区</label>
            <div class="layui-input-inline">
                <select class="level-3-select" lay-filter="#bioarea-wrap3level" name="area">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">详细地址</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="details_address" class="layui-input"  placeholder="请输入详细地址" value="">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">经度</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="longitude" class="layui-input"  placeholder="请输入经度" value="">-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <textarea name="details_address" rows="20" class="layui-textarea editor" placeholder="请输入详细地址"></textarea>
            </div>
        </div>

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">经度</label>-->
<!--            <div class="layui-input-block">-->
<!--&lt;!&ndash;                <input type="text" name="longitude" class="layui-input"  placeholder="请输入经度" value="">&ndash;&gt;-->
<!--                <div id="maplocation" style="width:500px;height:350px;display: none;">-->
<!--                </div>-->

<!--            </div>-->
<!--        </div>-->


<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">纬度</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="latitude" class="layui-input"  placeholder="请输入纬度" value="">-->
<!--            </div>-->
<!--        </div>-->

        <input name="id" type="hidden"/>
        <input name="regionId" type="hidden"/>

        <div class="layui-row">

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required" >经度:</label>
                    <div class="layui-input-block">
                        <input id="longitude" name="longitude" placeholder="请输入经度" class="layui-input map-location-input"
                               lay-verType="tips" lay-verify="required" required/>
                        <div id="locationBtn" class="layui-icon layui-icon-location map-location"></div>
                    </div>

                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required" >纬度:</label>
                    <div class="layui-input-block">
                        <input id="latitude" name="latitude" placeholder="请输入纬度" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>

                </div>
            </div>

        </div>

        <div id="demo" style="width: 100%;height: 600px;">

        </div>
        <div id="maplocation" style="width:500px;height:350px;display: none;"></div>

        <div class="layui-form-item" >
            <label class="layui-form-label ">经度</label>
            <div class="layui-input-block">
                <input type="text" name="lon" class="layui-input"   placeholder="请输入经度" value="" id="lon"   lay-filter="lon" >
                <tip>点击地图点选</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label  ">纬度</label>
            <div class="layui-input-block">
                <input type="text" name="lat" class="layui-input"   placeholder="请输入经度" value=""  id="lat"   lay-filter="lat" >
                <tip>点击地图点选</tip>
            </div>
        </div>




        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>


<script src="../../../layui/layui.js"></script>
<script>
    layui.config({
        base: '/js/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        'qqMap': 'qqMap'
    });
    layui.use("qqMap",function(){
        var qqMap = layui.qqMap;
        console.log(qqMap)
        qqMap.render({
            elem: 'demo',
            key:'KB3BZ-ZTJKP-4K5D5-LI6KC-OZ2F6-PXBGJ'
        })

    })

</script>
<script src="https://layui.11dz.cn/layui-v2.6.8/layui/layui.js"></script>

<script>
    layui.config({
        base: '/js/'
    }).extend({
        bioarea: 'bioarea'
    });
</script>
<script>
    layui.use(['form', 'bioarea'], function() {

        var form = layui.form
            , bioarea = layui.bioarea

        bioarea.render({
            elem: '#bioarea-wrap',
            defaultData: {
                provinceCode: '110000',
                cityCode: '110100',
                countyCode: '110113'
            },
            form
             form
        })
        //监听提交
        form.on('submit(demo1)', function(data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });


        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function() {
            var data = form.val('example');
            console.log(data);
            alert(JSON.stringify(data));
        });

    });
</script>


<script>
    /*
      该插件用于手动标注定位获取经纬度信息，
      需要自己维护初始地的经纬度，比如，系统中的地区列表中的地区都有经纬度信息；
      当前只集成了百度地图与天地图；
    */
    layui.config({
        base : '/layui_exts/'
    }).extend({
        locationX: 'location/locationX',
        location: 'location/location',
    }).use(['layer','form','jquery','location'],function(){
        $ = layui.jquery;
        var form = layui.form;
        var location = layui.location;

        // 自己维护初始化标注。这里给的是天安门
        //
        var locationData = {lng:116.404,lat:39.915};


        location.render("#locationBtn",{
            type:1,
            apiType: "baiduMap",
            coordinate: "baiduMap",
            mapType: 2,
            zoom: 15,
            title: '区域定位',
            init: function(){
                return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
            },
            success: function (data) {
                $("#longitude").val(data.lng);
                $("#latitude").val(data.lat);
            },
            onClickTip: function (data) {
                console.log(data);
            }

        });

    });








//地图
    var layer = layui.layer;
    $=layui.jquery;
    $(document).on('click','#lon',function(){

        layer.open({
            type:1,
            area:["500px","500px"],
            title:"测试",
            content:$('#maplocation'),
            success:function(){
                var map = new BMap.Map("maplocation"); // 创建地图实例
                var point = new BMap.Point(116.456, 39.915); // 创建点坐标
                map.centerAndZoom(point, 12);
                map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
                function myFun(result){
                    var cityName = result.name;
                    map.setCenter(cityName);
                    //alert("当前定位城市:"+cityName);
                }
                var myCity = new BMap.LocalCity();
                myCity.get(myFun);
                var marker = new BMap.Marker(map.getCenter());  // 创建标注
                map.addOverlay(marker);               // 将标注添加到地图中
                marker.enableDragging();                //可拖拽
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                map.addEventListener("click",function(e){
                    //alert(e.point.lng+","+e.point.lat);// 单击地图获取坐标点；
                    $('#lon').val(e.point.lng);
                    $('#lat').val(e.point.lat);
                    map.panTo(new BMap.Point(e.point.lng,e.point.lat));// map.panTo方法，把点击的点设置为地图中心点
                });
                marker.addEventListener("dragend", function(e){                    //拖拽标注获取标注坐标
                    //alert("当前位置：" + e.point.lng + ", " + e.point.lat);           //可拖拽的标注
                    $("#lon").val(e.point.lng);
                    $("#lat").val(e.point.lat);
                })
                //加载完成之后,改变标注点坐标,使之和当前定位的城市基本相符
                map.addEventListener("tilesloaded",function(){
                    var newpoint = map.getCenter();
                    marker.setPosition(newpoint);
                });
            } ,
            cancel: function(index, layero){
                //if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                document.getElementById("maplocation").style.display="none";//通过设置display属性可以使div隐藏后释放占用的页面空间
                layer.close(index)
                // }
                return false;
            }    //这里content是一个普通的String
        });
    });

</script>